<template>
    <div class="container">
      <a-row>
        <a-col :flex="1">
          <a-form :model="formModel" label-align="right" style="background-color: white;padding-top: 8px;margin-bottom: -8px;">
            <a-row :gutter="16">
              <a-space direction="horizontal" :size="5">
                <a-form-item field="quarter" label-col-flex="70px" label="问题类别">
                  <a-select v-model="formModel.bigTypeNameList.value" :style="{ width: '240px' }" allow-clear multiple
                    :max-tag-count="1" placeholder="全部" allow-search :trigger-props="{ autoFitPopupMinWidth: true }">
                    <a-option :value="item.label" v-for="item in questionList1">{{ item.label }}</a-option>
                  </a-select>
                </a-form-item>

                <a-form-item field="quarter" label-col-flex="60px" label="突出问题">
                  <a-select v-model="formModel.prominentProblemList.value" :style="{ width: '240px' }" allow-clear multiple
                    :max-tag-count="1" placeholder="全部" allow-search :trigger-props="{ autoFitPopupMinWidth: true }">
                    <a-option :value="item" v-for="item in questionList">{{ item }}</a-option>
                  </a-select>
                </a-form-item>

                <a-form-item field="quarter" label-col-flex="60px" label="问题类型">
                  <a-select v-model="formModel.problemTypeList.value" :style="{ width: '240px' }" allow-clear multiple
                    :max-tag-count="1" placeholder="全部" allow-search :trigger-props="{ autoFitPopupMinWidth: true }">
                    <a-option :value="item" v-for="item in questionList2">{{ item }}</a-option>
                  </a-select>
                </a-form-item>

                <a-form-item field="department" label-col-flex="60px" label="责任单位">
                  <a-select v-model="formModel.department.value" placeholder="请输入责任单位" :style="{ width: '220px' }"
                    allow-clear :max-tag-count="1" multiple
                    allow-search>
                    <a-option v-for="item in departmentList" :value="item">{{ item }}</a-option>
                  </a-select>
                </a-form-item>
                
                

                <a-form-item label-col-flex="0px" label="">
                  <a-space direction="horizontal" :size="12">
                    <a-button status="success" @click="fetchData">
                      <template #icon>
                        <icon-search />
                      </template>
                      查询
                    </a-button>
                  </a-space>
                </a-form-item>


                <a-form-item label-col-flex="60px" label="截至日期" style="margin-left: 20px;">
                  <a-input v-model="endTime"></a-input>
                </a-form-item>
              </a-space>
            </a-row>
          </a-form>
        </a-col>
      </a-row>


        <a-table :data="renderData" :columns="columns" :pagination="false" :bordered="{cell:true}" :scrollbar="true"
          :scroll="{ x: '100%', y: '82vh' }"  :sticky-header="0">
          <template #punished="{ rowIndex }"> 
            <table  v-if="renderData[rowIndex].task1List == null"
              class="tablecss" :style="{ minHeight: '85px' }">
              <!-- 头部区域 -->
              <tbody>
                <tr style="background-color: #f7f9fd;">
                  <td v-if="renderData[rowIndex].task1Name != null && renderData[rowIndex].task1Name != ''">
                    {{renderData[rowIndex].task1Name}}</td>
                  <td v-if="renderData[rowIndex].task2Name != null && renderData[rowIndex].task2Name != ''">
                    {{renderData[rowIndex].task2Name}}</td>
                  <td v-if="renderData[rowIndex].task3Name != null && renderData[rowIndex].task3Name != ''">
                    {{renderData[rowIndex].task3Name}}</td>
                  <td v-if="renderData[rowIndex].task4Name != null && renderData[rowIndex].task4Name != ''">
                    {{renderData[rowIndex].task4Name}}</td>
                  <td v-if="renderData[rowIndex].task5Name != null && renderData[rowIndex].task5Name != ''">
                    {{renderData[rowIndex].task5Name}}</td>
                  <td v-if="renderData[rowIndex].task6Name != null && renderData[rowIndex].task6Name != ''">
                    {{renderData[rowIndex].task6Name}}</td>
                  <td v-if="renderData[rowIndex].task7Name != null && renderData[rowIndex].task7Name != ''">
                    {{renderData[rowIndex].task7Name}}</td>
                  <!-- <td style="width: 70px;" v-if="rowIndex != 6 && rowIndex != 7 && rowIndex != 8 && rowIndex != 9 && rowIndex != 10 && rowIndex != 11">综合完成率</td>   -->
                </tr>
                  <tr>
                    <td v-if="renderData[rowIndex].task1Name != null && renderData[rowIndex].task1Name != ''">
                      {{renderData[rowIndex].task1Json}}</td>
                    <td v-if="renderData[rowIndex].task2Name != null && renderData[rowIndex].task2Name != ''">
                      {{renderData[rowIndex].task2Json}}</td>
                    <td v-if="renderData[rowIndex].task3Name != null && renderData[rowIndex].task3Name != ''">
                      {{renderData[rowIndex].task3Json}}</td>
                    <td v-if="renderData[rowIndex].task4Name != null && renderData[rowIndex].task4Name != ''">
                      {{renderData[rowIndex].task4Json}}</td>
                    <td v-if="renderData[rowIndex].task5Name != null && renderData[rowIndex].task5Name != ''">
                      {{renderData[rowIndex].task5Json}}</td>
                    <td v-if="renderData[rowIndex].task6Name != null && renderData[rowIndex].task6Name != ''">
                      {{renderData[rowIndex].task6Json}}</td>
                    <td v-if="renderData[rowIndex].task7Name != null && renderData[rowIndex].task7Name != ''">
                      {{renderData[rowIndex].task7Json}}</td>
                    <!-- <td style="width: 70px;" v-if="rowIndex != 6 && rowIndex != 7 && rowIndex != 8 && rowIndex != 9 && rowIndex != 10 && rowIndex != 11">
                          {{renderData[rowIndex].task3Json}}
                    </td> -->
                  </tr>
              </tbody>
            </table>

            <table  v-if="renderData[rowIndex].task1List != null"
              class="tablecss" :style="{ minHeight: '170px' }">
              <!-- 头部区域 -->
              <tbody>
                <tr style="background-color: #f7f9fd;">
                  <td :colspan="renderData[rowIndex].task1List.length" v-if="renderData[rowIndex].task1List != null && renderData[rowIndex].task1Name != ''">
                    {{renderData[rowIndex].task1Name}}</td>
                  <td :colspan="renderData[rowIndex].task2List.length" v-if="renderData[rowIndex].task2List != null && renderData[rowIndex].task2Name != ''">
                    {{renderData[rowIndex].task2Name}}</td>
                  <td :colspan="renderData[rowIndex].task3List.length" v-if="renderData[rowIndex].task3List != null && renderData[rowIndex].task3Name != ''">
                    {{renderData[rowIndex].task3Name}}</td>
                  <td :colspan="renderData[rowIndex].task4List.length" v-if="renderData[rowIndex].task4List != null && renderData[rowIndex].task4Name != ''">
                    {{renderData[rowIndex].task4Name}}</td>
                  <td :colspan="renderData[rowIndex].task5List.length" v-if="renderData[rowIndex].task5List != null && renderData[rowIndex].task5Name != ''">
                    {{renderData[rowIndex].task5Name}}</td>
                  <td :colspan="renderData[rowIndex].task6List.length" v-if="renderData[rowIndex].task6List != null && renderData[rowIndex].task6Name != ''">
                    {{renderData[rowIndex].task6Name}}</td>
                  <td :colspan="renderData[rowIndex].task7List.length" v-if="renderData[rowIndex].task7List != null && renderData[rowIndex].task7Name != ''">
                    {{renderData[rowIndex].task7Name}}</td>
                  <!-- <td style="width: 70px;">综合完成率</td>   -->
                </tr>
                <tr>
                    <td v-for="item2 in renderData[rowIndex].task1List">{{item2.name}}</td>
                    <td v-for="item2 in renderData[rowIndex].task2List">{{item2.name}}</td>
                    <td v-for="item2 in renderData[rowIndex].task3List">{{item2.name}}</td>
                    <td v-for="item2 in renderData[rowIndex].task4List">{{item2.name}}</td>
                    <td v-for="item2 in renderData[rowIndex].task5List">{{item2.name}}</td>
                    <td v-for="item2 in renderData[rowIndex].task6List">{{item2.name}}</td>
                    <td v-for="item2 in renderData[rowIndex].task7List">{{item2.name}}</td>
                    <!-- <td style="width: 70px;" :rowspan="2">
                       {{renderData[rowIndex].completeRate}}%
                    </td> -->
                                          
                    <!-- <td v-if="renderData[rowIndex].task2Name != null && renderData[rowIndex].task2Name != ''">
                      {{renderData[rowIndex].task1Json}}</td>
                    <td v-if="renderData[rowIndex].task3Name != null && renderData[rowIndex].task3Name != ''">
                      {{renderData[rowIndex].task1Json}}</td>
                    <td v-if="renderData[rowIndex].task4Name != null && renderData[rowIndex].task4Name != ''">
                      {{renderData[rowIndex].task1Json}}</td>
                    <td v-if="renderData[rowIndex].task5Name != null && renderData[rowIndex].task5Name != ''">
                      {{renderData[rowIndex].task1Json}}</td>
                    <td v-if="renderData[rowIndex].task6Name != null && renderData[rowIndex].task6Name != ''">
                      {{renderData[rowIndex].task1Json}}</td>
                    <td v-if="renderData[rowIndex].task7Name != null && renderData[rowIndex].task7Name != ''">
                      {{renderData[rowIndex].task1Json}}</td> -->
                </tr>
                
                <tr>
                  <td v-for="item2 in renderData[rowIndex].task1List">{{item2.value}}</td>
                  <td v-for="item2 in renderData[rowIndex].task2List">{{item2.value}}</td>
                  <td v-for="item2 in renderData[rowIndex].task3List">{{item2.value}}</td>
                  <td v-for="item2 in renderData[rowIndex].task4List">{{item2.value}}</td>
                  <td v-for="item2 in renderData[rowIndex].task5List">{{item2.value}}</td>
                  <td v-for="item2 in renderData[rowIndex].task6List">{{item2.value}}</td>
                  <td v-for="item2 in renderData[rowIndex].task7List">{{item2.value}}</td>
                </tr>
              </tbody>
            </table>

          </template>
          <template #established="{ rowIndex }"> 
            <div style="white-space: pre-wrap;word-break: break-all;text-align: left;font-size: 13px;">
               <div v-for="item2 in renderData[rowIndex].establishedJson" style="display: flex;padding-left: 3px;margin-top:2px;">
                  <div v-if="item2.status === 1" style="width:50px;display: block;color:green;text-align:center;border: 1px solid green;border-radius:  5px;margin: 0px;line-height: 13px;height:16px">已建立</div>
                  <div v-else style="width:50px;display: block;color:red;text-align:center;border: 1px solid red;border-radius:  5px;margin: 0px;line-height: 13px;height:16px">未建立</div>
                  <a-tooltip  style="margin-left: 5px;flex:1;display: block;" :content="item2.name" position="top" mini background-color="#3491FA">
                    <span
                      style="overflow: hidden;text-overflow: ellipsis;display: block;margin-left: 5px;width: 100%;height: 16px;line-height: 16px; -webkit-line-clamp: 1;">{{ item2.name }}</span>
                  </a-tooltip>
               </div>

            </div>
          </template>
          <template #topthree="{ rowIndex }"> 
            <div style="white-space: pre-wrap;word-break: break-all;text-align: center;">
              {{ renderData[rowIndex].topThreeEvaluation }}
            </div>
          </template>
          <template #bottomthree="{ rowIndex }"> 
            <div style="white-space: pre-wrap;word-break: break-all;text-align: center;">
              {{ renderData[rowIndex].bottomThreeEvaluation }}
            </div>
          </template>
          <template #remark="{ rowIndex }"> 
            <div style="white-space: pre-wrap;word-break: break-all;text-align: left;padding-left: 3px;">
              {{ renderData[rowIndex].remarks }}
            </div>
          </template>
          <template #leadingLeader="{ rowIndex }"> 
            <div style="white-space: pre-wrap;word-break: break-all;text-align: center;">
              {{ renderData[rowIndex].leadingLeader }}
            </div>
          </template>


        </a-table> 
    </div>
  </template>
  
  <script lang="ts" setup>
  import { computed, ref, reactive, watch, nextTick } from 'vue';
  import { useRouter } from 'vue-router';
  import { Modal, Message } from '@arco-design/web-vue';
  import { postRequest, uploadFileRequest } from '@/api/common';
  import { baseURL } from '@/api/base';
  import { formatSortByArea } from '@/utils/sortUtil.js';
import { isNumber } from 'lodash';

  const downAll = ()=>{
   
  }

  const endTime = ref("2025年7月9日");

const questionList:any[] = ["信访积案化解", "后进村整顿", "行政村布局调整后半篇文章", "矛盾纠纷实质性化解", "道路交通安全综合治理", "执行难破产难", "不担当不作为", "违规吃喝", "违规收送礼品礼金", "违规打牌和赌博", "酒驾醉驾", "中小学校园餐", "公共交通服务质量不优", "物业服务履约不到位、侵占业主公共收益", "大气污染", "12345 投诉办理质效不高", "新就业群体急难愁盼", "民生案件破案", "命案防范", "未成年人保护和预防犯罪", "精神障碍患者服务管理", "电信网络诈骗打击", "禁毒工作", "高额彩礼", "外籍新娘管理服务", "失能失智老人日间照护", "留守妇女就业", "农村留守儿童假期托管", "农村慢性病管理心电一张网", "中小学生午休趴睡变躺睡", "市区老年人娱乐活动和场所建设"];
const questionList1 :any[] = [
 {
    label: "工作推进类",
    value: "工作推进类"
  },
  {
    label: "存量销号类",
    value: "存量销号类"
  },
  {
    label: "发现查处类",
    value: "发现查处类"
  },
  {
    label: "试点建制类",
    value: "试点建制类"
  }
];
const questionList2:any[] = ["十大集中攻坚行动", "社会领域突出问题", "政法领域突出问题", "民生领域突出问题"];

let departmentList = ref<any[]>([]);
const fetchDepartment = async () => { 
  departmentList.value = ["市信访局", "市委社会工作部", "市委政法委", "市交通运输局", "市公安局", "市法院", "市纪委监委机关", "市教育局", "市住房和城市更新局", "市生态环境局", "市政数局", "市委宣传部", "市民政局", "市卫健委"];
};
fetchDepartment();


  const router = useRouter();
  const formModel = {
    department: ref<any[]>([]),
    bigTypeNameList: ref<any[]>([]),
    prominentProblemList: ref<any[]>([]),
    problemTypeList: ref<any[]>([]),
    isTopTen: ref(""),
    dateRange: ref<any[]>([]),
    dateRange2: ref<any[]>([]),
  };
  const renderData = ref<any[]>([]);
  const columns:any = reactive([
    {
      title: '序号',
      dataIndex:'id',
      align: 'center',
      width: 42,
    },
    {
      title: '突出问题',
      dataIndex:'prominentIssue',
      align: 'center',
      width: 60,
    },
    {
      title: '问题类型',
      dataIndex:'issueType',
      align: 'center',
      width: 60,
    },
    {
      title: '问题类别',
      dataIndex:'issueCategory',
      align: 'center',
      width: 60,
    },
    {
      title: ' 牵头 领导',
      dataIndex:'leadingLeader',
      align: 'center',
      slotName: 'leadingLeader',
      width: 45,
    },
    {
      title: ' 牵头 单位',
      dataIndex:'leadingUnit',
      align: 'center',
      width: 50,
    },
    {
      title: '整改工作任务及进展',
      dataIndex:'disciplinaryPunishedPersons',
      align: 'center',
      slotName: 'punished',
      width: 540,
    },
    {
      title: '追责问责(人数)',
      dataIndex:'accountabilityCount',
      align: 'center',
      width: 60,
    },
    {
      title: '建章立制',
      dataIndex:'regulationsPlanCount',
      align: 'center',
      width: 100,
      children:[
          {
            title: '计划',
            dataIndex:'regulationsPlanCount',
            align: 'center',
            width: 50,
          },
          {
            title: '完成',
            dataIndex:'regulationsCompletedCount',
            align: 'center',
            width: 50,
          }
        ]
    },
    {
      title: '制度清单',
      dataIndex:'regulationsPlanJson',
      align: 'center',
      slotName: 'established',
      width: 240,
    },
    {
      title: '工作评价',
      dataIndex:'topThreeEvaluation',
      align: 'center',
      width: 90,
      children:[
          {
            title: '前三名',
            dataIndex:'topThreeEvaluation',
            align: 'center',
            slotName: 'topthree',
            width: 45,
          },
          {
            title: '后三名',
            dataIndex:'bottomThreeEvaluation',
            align: 'center',
            slotName: 'bottomthree',
            width: 45,
          }
        ]
    },
    {
      title: '备注',
      dataIndex:'remarks',
      align: 'center',
      slotName: 'remark',
      width: 95,
    },
  ]);
  
  
  // 修改fetchData函数，直接使用静态数据
  const fetchData = async() => {
    let res = await postRequest("dsms/jyReport/queryData", {
      pageNum: 1,
      prominentProblemList:formModel.prominentProblemList.value,
      problemTypeList:formModel.problemTypeList.value,
      bigTypeNameList:formModel.bigTypeNameList.value,
      departmentList:formModel.department.value,
      pageSize: 9999

    });
    // 计算合计行数据
    res.list.forEach((item: any,index:number) => {
      let completeRate = 0;
      let currentTotal = 0;
      let total = 0;
      if(item.task1Json !=null &&item.task1Json.length>10 && item.task1Json.indexOf("name") != -1){
        item.task1Json = item.task1Json.trim();
        item.task1List = JSON.parse(item.task1Json);
        // item.task1List.forEach((item2:any,index2:number)=>{
        //   if(index2==0){
        //     if(item2!=null&&item2.value!=null&& !isNumber(item2.value) &&item2.value.indexOf("%") != -1){
        //       item2.value = item2.value.replace("%","");
        //     }
        //     total = total + Number(item2.value);
        //   }else if(index2==1){
        //      if(item2&&item2.value!=null&& !isNumber(item2.value)&&item2.value.indexOf("%") != -1){
        //       item2.value = item2.value.replace("%","");
        //     }
        //     currentTotal = currentTotal + Number(item2.value);
        //   }
        // })
      }else{
        total= item.task1Json;
      }
      if(item.task2Json !=null &&item.task2Json.length>10 && item.task2Json.indexOf("name") != -1){
        item.task2Json = item.task2Json.trim();
        item.task2List = JSON.parse(item.task2Json);
        // item.task2List.forEach((item2:any,index2:number)=>{
        //   if(index2==0){
        //     if(item2&&item2.value!=null&& !isNumber(item2.value)&&item2.value.indexOf("%") != -1){
        //       item2.value = item2.value.replace("%","");
        //     }
        //     total = total + Number(item2.value);
        //     console.log(item2.value);
        //   }else if(index2==1){
        //      if(item2&&item2.value!=null&& !isNumber(item2.value)&&item2.value.indexOf("%") != -1){
        //       item2.value = item2.value.replace("%","");
        //     }
        //     currentTotal = currentTotal + Number(item2.value);
        //     console.log(item2.value);
        //   }
        // })
      }else{
        currentTotal= item.task2Json;
      }
      if(item.task3Json !=null &&item.task3Json.length>10 && item.task3Json.indexOf("name") != -1){
        item.task3Json = item.task3Json.trim();
        item.task3List = JSON.parse(item.task3Json);
        // item.task3List.forEach((item2:any,index2:number)=>{
        //   if(index2==0){
        //     if(item2&&item2.value!=null&& !isNumber(item2.value)&&item2.value.indexOf("%") != -1){
        //       item2.value = item2.value.replace("%","");
        //     }
        //     total = total + Number(item2.value);
        //   }else if(index2==1){
        //     if(item2&&item2.value!=null&& !isNumber(item2.value)&&item2.value.indexOf("%") != -1){
        //       item2.value = item2.value.replace("%","");
        //     }
        //     currentTotal = currentTotal + Number(item2.value);
        //   }
        // })
      }
      if(item.task4Json !=null &&item.task4Json.length>10 && item.task4Json.indexOf("name") != -1){
        item.task4Json = item.task4Json.trim();
        item.task4List = JSON.parse(item.task4Json);
        // item.task4List.forEach((item2:any,index2:number)=>{
        //   if(index2==0){
        //     if(item2&&item2.value!=null&& !isNumber(item2.value)&&item2.value.indexOf("%") != -1){
        //       item2.value = item2.value.replace("%","");
        //     }
        //     total = total + Number(item2.value);
        //   }else if(index2==1){
        //     if(item2&&item2.value!=null&& !isNumber(item2.value)&&item2.value.indexOf("%") != -1){
        //       item2.value = item2.value.replace("%","");
        //     }
        //     currentTotal = currentTotal + Number(item2.value);
        //   }
        // })
      }
      if(item.task5Json !=null &&item.task5Json.length>10 && item.task5Json.indexOf("name") != -1){
        item.task5Json = item.task5Json.trim();
        item.task5List = JSON.parse(item.task5Json);
        // item.task5List.forEach((item2:any,index2:number)=>{
        //   if(index2==0){
        //     if(item2&&item2.value!=null&& !isNumber(item2.value)&&item2.value.indexOf("%") != -1){
        //       item2.value = item2.value.replace("%","");
        //     }
        //     total = total + Number(item2.value);
        //   }else if(index2==1){
        //     if(item2&&item2.value!=null&& !isNumber(item2.value)&&item2.value.indexOf("%") != -1){
        //       item2.value = item2.value.replace("%","");
        //     }
        //     currentTotal = currentTotal + Number(item2.value);
        //   }
        // })
      }
      if(item.task6Json !=null &&item.task6Json.length>10 && item.task6Json.indexOf("name") != -1){
        item.task6Json = item.task6Json.trim();
        item.task6List = JSON.parse(item.task6Json);
        item.task6List.forEach((item2:any,index2:number)=>{
          if(index2==0){
            if(item2&&item2.value!=null&& !isNumber(item2.value)&&item2.value.indexOf("%") != -1){
              item2.value = item2.value.replace("%","");
            }
            total = total + Number(item2.value);
          }else if(index2==1){
            if(item2&&item2.value!=null&& !isNumber(item2.value)&&item2.value.indexOf("%") != -1){
              item2.value = item2.value.replace("%","");
            }
            currentTotal = currentTotal + Number(item2.value);
          }
        })
      }
      if(item.task7Json !=null &&item.task7Json.length>10 && item.task7Json.indexOf("name") != -1){
        item.task7Json = item.task7Json.trim();
        item.task7List = JSON.parse(item.task7Json);
        item.task7List.forEach((item2:any,index2:number)=>{
          if(index2==0){
            if(item2&&item2.value!=null&& !isNumber(item2.value)&&item2.value.indexOf("%") != -1){
              item2.value = item2.value.replace("%","");
            }
            total = total + Number(item2.value);
          }else if(index2==1){
            if(item2&&item2.value!=null&& !isNumber(item2.value)&&item2.value.indexOf("%") != -1){
              item2.value = item2.value.replace("%","");
            }
            currentTotal = currentTotal + Number(item2.value);
          }
        })
      }
      console.log(total);
      if(total == 0){
        total = 1;
      }

      completeRate = Number((currentTotal / total * 100).toFixed(2));
      if(isNaN(completeRate)){
        completeRate = 0;
      }
      item.completeRate = completeRate;

      if(item.regulationsPlanJson !=null &&item.regulationsPlanJson.length>10 && item.regulationsPlanJson.indexOf("name") != -1){
        item.establishedJson = JSON.parse(item.regulationsPlanJson);
        console.log(item.establishedJson);

        // const result = item.establishedJson.map((task:any, i:number) => {
        //   const num = i + 1;
        //   let text = `${num}.${task.name}`;

        //   // 添加完成状态
        //   if (task.status === 1) text = "(已完成)"+text;
        //   else text = "(未建立)"+text;

        //   // 添加结尾符号
        //   if (i === 2) return text + "。";
        //   if (i === item.establishedJson.length - 1) return text;
        //   return text + "；";
        // }).join("\n");
        // item.establishedText = result



      }

      // regulationsPlanJson

    });
    renderData.value = res.list;

  };
  
  fetchData();
  </script>
  
  <script lang="ts">
  export default {
    name: 'comprehensive',
  };
  </script>
  
  <style scoped lang="less">
  .container {
    padding: 3px 3px 3px 3px;
  }
  ::v-deep(.arco-input-wrapper .arco-input[disabled]){
    color: black;
    -webkit-text-fill-color: black;
  }
  ::v-deep(.arco-table .arco-table-td){
    font-size: 13px;
  }
  ::v-deep(.arco-table .arco-table-th){
    font-size: 13px;
    padding: 5px;
  }
  ::v-deep(.arco-table .arco-table-cell){
    padding: 0px;
  }
  table, th, td {
    border: 1px solid #e5e6eb;
  }
  .tablecss{
    width: 100%;border-collapse: collapse;table-layout: fixed;height: 100%;min-height: 67px;margin-top: -1px;
  }
  </style>